<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
  <link href="css/aa.css" rel="stylesheet"/>
</head>
<body>
<div class="body-scrollbar" style="width: 265px;height:400px;overflow-y: scroll;overflow-x: hidden">
  <div class="m_header">
    <div class="m_header_top">
      网站模板—理财贷款
    </div>
    <div id="m_button" style="position: absolute ;right: 2%;top: 15%;cursor: pointer;">
      <img src="img/m_liebiao.png">
    </div>

  </div>

  <div id="m_navbar">
    <a href="index.html" class="m_navbar_item" >
      <div style="width: 100%;margin-top: .5rem">
        <img src="./img/m_home.png">
      </div>
      <div>首页</div>
    </a>
    <a href="about.html" class="m_navbar_item">
      <div style="width: 100%;margin-top: .5rem">
        <img src="./img/m_qq.png">
      </div>
      <div>关于我们</div>
    </a>
    <a href="loan.html" class="m_navbar_item"  style="background: #41474e;">
      <div style="width: 100%;margin-top: .5rem">
        <img src="./img/m_loan.png">
      </div>
      <div>贷款专营</div>
    </a>
    <a href="news.html" class="m_navbar_item">
      <div style="width: 100%;margin-top: .5rem">
        <img src="./img/m_news.png">
      </div>
      <div>新闻动态</div>
    </a>
    <a href="contact.html" class="m_navbar_item">
      <div style="width: 100%;margin-top: .5rem">
        <img src="./img/m_phone.png">
      </div>
      <div>联系我们</div>
    </a>
  </div>

  <!--首页-->
  <div style="margin-top: 2.25rem;position: relative">



    <div id="index_sub">

      <div style="font-size: .8rem;">
        <div style="width: 16.1rem;color: #333;height: 2rem;line-height: 2rem;background: url('img/m_title.png') no-repeat 0 50%;padding-left: 1.6rem">
          贷款专营
        </div>
        <div style="width: 16.1rem;height: 230px;">
          <div style="width: 8rem;height: 108px;float: left">
            <img src="img/m_loan1.jpg" style="width: 120px;height: 108px;"/>
          </div>

          <div style="width: 8rem;height: 108px;float: left">
            <img src="img/m_loan2.jpg" style="width: 120px;height: 108px;"/>
          </div>

          <div style="width: 8rem;height: 108px;float: left">
            <img src="img/m_loan3.jpg" style="width: 120px;height: 108px;"/>
          </div>

          <div style="width: 8rem;height: 108px;float: left">
            <img src="img/m_loan4.jpg" style="width: 120px;height: 108px;"/>
          </div>

        </div>


      </div>

      <div class="m_footer">
        <div style="text-align: center">
          ©2017 网站模板—理财贷款 版权所有
        </div>
        <div style="text-align: center">
          本站使用 凡科建站 搭建 |电脑版
        </div>
      </div>
    </div>
  </div>

  <div id="m_footer_nav" style="">
    <a class="m_footer_nav_list">
      <div><img src="img/m_phone.png"></div>
      <div style="font-size: .5rem;color: #fff">电话咨询</div>
    </a>

    <a class="m_footer_nav_list">
      <div><img src="img/m_map.png"></div>
      <div style="font-size: .5rem;color: #fff">在线地图</div>
    </a>
    <a href="msg.html" class="m_footer_nav_list">
      <div><img src="img/m_msg2.png"></div>
      <div style="font-size: .5rem;color: #fff">在线留言</div>
    </a>
    <a class="m_footer_nav_list">
      <div><img src="img/m_qq.png"></div>
      <div style="font-size: .5rem;color: #fff">qq交流</div>
    </a>
  </div>

</div>
<script>

  window.onload = function () {

//   侧边栏点击
    var m_navbar = document.getElementById("m_navbar")
    var m_button = document.getElementById("m_button")
    var index_sub = document.getElementById("index_sub")
    var m_footer_nav = document.getElementById("m_footer_nav")
    console.log(m_navbar.offsetLeft)
    m_button.onclick = function () {
      if (m_navbar.offsetLeft == 265){
        m_footer_nav.classList.add("m_footer_nav");
        index_sub.classList.add("index_sub");
        m_navbar.classList.add("m_navbar");
//        m_footer_nav.style.left = -57 + "px"
      }else {
        m_navbar.classList.remove("m_navbar")
        index_sub.classList.remove("index_sub")
        m_footer_nav.classList.remove("m_footer_nav")
//        m_footer_nav.style.left = 0 + "px"
      }
    }
  }

</script>
</body>
</html>
